<template>
  <div class="container header mt-5">
    <div class="content">
      <div class="a">
        <div class="b">
          <div class="c" style="--i: 0"></div>
          <div class="d" style="--i: 1"></div>
          <div class="e" style="--i: 2"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- 代码雨区域 -->
  <canvas ref="canvasRef" class="canvas-bg"></canvas>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const canvasRef = ref(null); // 通过 ref 获取 canvas 元素
let animationFrameId = null; // 保存动画帧 ID 用于清理
const str = "javascript html5 canvas";
const fontSize = 18;
let coordinate = [];

// 初始化画布尺寸
const resizeCanvas = () => {
  if (!canvasRef.value) return;

  const W = window.innerWidth;
  const H = window.innerHeight;
  canvasRef.value.width = W;
  canvasRef.value.height = H;

  // 重置坐标数组
  const columns = Math.floor(W / fontSize);
  coordinate = Array(columns).fill(0);
};

// 绘制动画
const draw = () => {
  const canvas = canvasRef.value;
  if (!canvas) return;

  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.font = `800 ${fontSize}px 宋体`;
  ctx.fillStyle = "#01fef5";

  for (let i = 0; i < coordinate.length; i++) {
    const charIndex = Math.floor(Math.random() * str.length);
    const x = i * fontSize;
    const y = coordinate[i] * fontSize;

    ctx.fillText(str[charIndex], x, y);

    if (y >= canvas.height && Math.random() > 0.9) {
      coordinate[i] = 0;
    } else {
      coordinate[i]++;
    }
  }

  animationFrameId = requestAnimationFrame(draw);
};

// 生命周期管理
onMounted(() => {
  resizeCanvas();
  draw();
  window.addEventListener("resize", resizeCanvas);
});

onUnmounted(() => {
  window.removeEventListener("resize", resizeCanvas);
  cancelAnimationFrame(animationFrameId); // 清理动画帧
});
</script>

<style scoped>
.canvas-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: -1; /* 调整为 0 确保在普通元素下方 */
}

.register {
  /* 其他元素需要设置 z-index > 0 才能覆盖 canvas */
  z-index: -100;
} /* 3D轮播图 */
.header {
  display: flex;
  flex-direction: column;
  min-height: 500px;
}

.content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.a {
  position: relative;
  perspective: 1600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.b {
  width: 400px;
  height: 250px;
  position: relative;
  transform-style: preserve-3d;
  animation: move 8s infinite cubic-bezier(0.7, 0, 0.17, 1);
}

.b div {
  position: absolute;
  background-size: cover;
  opacity: 0.9;
  width: 400px;
  height: 250px;
  transform: rotateY(calc(var(--i) * 120deg)) translateZ(600px);
}

.c {
  background-image: url("@/assets/images/1.jpg");
}

.d {
  background-image: url("@/assets/images/2.jpg");
}

.e {
  background-image: url("@/assets/images/3.jpg");
}

@keyframes move {
  0% {
    transform: translateZ(-100px) rotateY(0);
  }
  33% {
    transform: translateZ(-100px) rotateY(-120deg);
  }
  66% {
    transform: translateZ(-100px) rotateY(-240deg);
  }
  100% {
    transform: translateZ(-100px) rotateY(-360deg);
  }
}
</style>